<template>
<view class="fix-full-page">
	<view class="navigation-bar" :style="{height:height}">
		<view class="navigation-bar-fixed" :style="{height:height,background:(!config.transparent&&!config.linear)?config.bgcolor:'transparent'}">
			<!-- capsule or normal -->
			<view  class="navigation-bar-textbox" :style="{top:marginTop}">
				<view class="button-action" hover-class="button-action-active" @click="back_">
					<uni-icons type="left" size="20" color="white"></uni-icons>
				</view>
				<view v-if="config.showHomeBtn" class="button-action" hover-class="button-action-active" @click="home_">
					home
				</view>
			</view>
			<!-- title -->
			<view class="navigation-bar-title" :style="'margin-top:'+marginTop+';color:'+config.fontcolor">{{cmsConfig.justForJumpVer.title}}</view>
      <view class="navigation-bar-settings"></view>
		</view>
	</view>
  <view class="nav-content" :style="{height: contentHeight}">
     <slot />
  </view>
</view>

</template>

<script>
import uniIcons from "../uni-icons/uni-icons";
export default {
  components: {
    uniIcons
  },
  data() {
    return {
      cmsConfig: uni.faceidVerifySdkCmsConfig
    };
  },
  computed: {
    contentHeight(){
      return `calc(100% - ${this.height});`
    },
    height() {
      const { platform, statusBarHeight } = uni.getSystemInfoSync();
      let height = statusBarHeight + 4; //ios 24px
      if (platform.toLowerCase() == "android") {
        height += 4; //android 28px
      }
      // 胶囊高度 32px 下边框6px height 状态栏高度
      return height + 38 + "px";
    },
    marginTop() {
      const { platform, statusBarHeight } = uni.getSystemInfoSync();
      let height = statusBarHeight + 4;
      if (platform.toLowerCase() == "android") {
        height += 4;
      }
      return height + "px";
    }
  },
  updated() {
    console.log(this.config);
  },
  mounted() {
    this.cmsConfig = uni.faceidVerifySdkCmsConfig;
  },
  props: {
    config: {
      type: Object,
      default() {
        return {
          title: "",
          bgcolor: "black",
          linear: false,
          transparent: false,
          fontcolor: "#fff"
        };
      }
    },
    scrollTop: {
      type: Number,
      default: 0
    },
    scrollMaxHeight: {
      type: Number,
      default: 288
    }
  },
  methods: {
    back_() {
      this.$emit("back");
    },
    home_() {
      this.$emit("home");
    }
  }
};
</script>

<style>
/* page{
  height: 100%;
} */
.nav-content{
  position: relative;
}
.fix-full-page{
  position: fixed;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.navigation-bar {
  width: 100%;
  box-sizing: border-box;
}

.navigation-bar .navigation-bar-fixed {
  width: 100%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 9999999;
  background: #fff;
  display: flex;
  justify-content: center;
}

.navigation-bar .navigation-bar-fixed .navigation-bar-title {
  width: 280upx;
  line-height: 32px;
  height: 32px;
  color: #fff;
  font-size: 26upx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  text-align: center;
}

.navigation-bar .navigation-bar-fixed .navigation-bar-custom-textbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  left: 0px;
  padding: 0 23upx;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 9999;
}

.navigation-bar-textbox,
.navigation-bar-settings {
  width: 60upx;
}
.navigation-bar .navigation-bar-fixed .navigation-bar-textbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 32px;
  height: 32px;
  font-size: 30upx;
  width: 60upx;
  left: 0px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 9999;
}

.navigation-bar .navigation-bar-fixed .navigation-bar-textbox .button-action {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
